<template>
  <div class='my-qa' id="full-screen" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <div v-if="!done" class="qa-list">
      <span class="ques_num">
        <span>{{questionInfo.num}}</span>
      </span>
      <p class="title">{{questionInfo.title}}</p>
      <ul class="ans-list">
        <li v-for="(item,index) in listData" :key="index" :class="{'is-active':item.id==questionInfo.answer}" @click="setActive(item)">
          {{item.answer}}
        </li>
      </ul>
    </div>

    <!-- done -->
    <div v-else class="finished-box">
      <ul class="joiners-list">
        <li v-for="(item, index) in joinerData" :key="index">
          <img :src="item.pic" alt="">
          <p class="name">{{item.name}}</p>
        </li>
      </ul>
    </div>

    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen"></FullScreen>
  </div>
</template>
<script>
import FullScreen from "../../../components/fullScreen";
export default {
  components: { FullScreen },
  name: "",
  data() {
    return {
      done: true, //是否完成
      questionInfo: {
        num: 100,
        title: "我是题目",
        answer: 1
      },
      imgs: {
        full: require("../../../assets/images/works/full.png"),
        cancelFull: require("../../../assets/images/works/cancel-full-screen.png")
      },
      listData: [
        { id: 1, answer: "我就是答案1" },
        { id: 2, answer: "我就是答案1" },
        { id: 3, answer: "我就是答案1" },
        { id: 4, answer: "我就是答案1" }
      ],
      joinerData: [
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        },
        {
          name: "老王",
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
        }
      ],

      isFullScreen: false, //是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false // 隐藏
    };
  },
  methods: {
    setActive(item) {
      this.$set(this.questionInfo, "answer", item.id);
    },
    finished() {},

    fullScreen() {
      _g.fullScreen("full-screen", this);
    },
    showFullScreen(e) {
      var mouseY =
        e.clientY -
        document.querySelector(".work-menu").clientHeight -
        10 -
        document.querySelector("#full-screen").clientHeight;
      var heightModel = this.isFullScreen ? "-220" : "-40";
      if (mouseY > heightModel) {
        this.hiddenFull = true;
      } else {
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen() {
      this.hiddenFull = false;
    }
  },
  created() {
    var that=this
    window.onresize=function(){
      var show = document.querySelector("#full-screen").clientHeight==document.querySelector('html').clientHeight
      that.$set(that,"isFullScreen",show)
    }
  },
  beforeDestroy(){
    window.onresize=null
  }
};
</script>
<style lang="scss" scoped>
.my-qa {
  width: 100%;
  background: url("../../../assets/images/works/bac_1.jpg");
  background-size: cover;
  min-height: 100%;
  position: relative;
  overflow: hidden;

  .ques_num {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: -150px;
    font-size: 30px;
    transform: translateY(-50%);
    color: red;
    border: 2px solid #fff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;

    span {
      position: absolute;
      left: 3px;
      top: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      border-radius: 50%;
      background-color: #fff;
      line-height: 80px;
    }
  }

  .qa-list {
    position: absolute;
    width: 50%;
    max-width: 800px;
    min-height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #000, $alpha: 0.5);
    border: 1px solid #fff;
  }
  p.title {
    background-color: #fff;
    color: red;
    padding: 15px;
    font-size: 24px;
    line-height: 30px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .ans-list {
    margin: 0 15%;
    box-sizing: border-box;

    li {
      background-color: #fff;
      font-size: 18px;
      min-height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 30px 0;
      border-radius: 4px;
      color: #666;
      cursor: pointer;
      padding: 10px;
    }
    li.is-active {
      color: #fff;
      font-weight: 600;
      background-color: red;
      // font-size: 20px;
    }
  }

  .finished-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 40px;
    width: 60vw;
    min-height: 31vw;
    background: url("../../../assets/images/works/bac_success.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;

    .joiners-list {
      display: flex;
      flex-wrap: wrap;

      margin-top: 7vw;

      li {
        margin: 5px;
      }

      img {
        border-radius: 50%;
        width: 80px;
        height: 80px;
      }
      p {
        text-align: center;
        color: #fff;
        line-height: 30px;
      }
    }
  }
}
</style>